{extend name="admin@index_layout"/}
{block name="main"}
<div class="layui-card">
    <div class="layui-card-header">会员列表</div>
    <div class="layui-card-body">
        <blockquote class="layui-elem-quote quoteBox">
            <form class="layui-form searchForm" id="searchForm" method="get">
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input type="text" name="keyword" class="layui-input" placeholder="请输入关键词">
                    </div>
                    <a class="layui-btn search_btn" data-type="reload" onclick="searchForm()">搜索</a>
                    <a class="layui-btn layui-btn-normal" onclick="resetForm()"><i class="layui-icon layui-icon-refresh-1"></i> 重置</a>
                </div>
            </form>
        </blockquote>
        <table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
    </div>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <a class="layui-btn layui-btn-sm layui-btn-danger confirm layui-batch-all" data-href='{:url("delete")}'>批量删除</a>
        <a class="layui-btn layui-btn-sm layui-iframe" href="{:url('add')}">添加会员</a>
    </div>
</script>
<script type="text/html" id="barTool">
    <a href='{:url("edit")}?id={{ d.id }}' class="layui-btn layui-btn-xs layui-iframe">编辑</a>
    <a href='{:url("delete")}?ids={{ d.id }}' class="layui-btn layui-btn-danger layui-btn-xs layui-tr-del">删除</a>
</script>
<script type="text/html" id="statusTpl">
    <input type="checkbox" name="status" value="{{d.id}}" data-href="{:url('setStatus')}?id={{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="switchStatus" {{ d.status==1 ? 'checked' : '' }}>
</script>
<script type="text/html" id="avatarTpl">
    <img src="{{ d.avatar }}" class="layui-nav-img userAvatar preview-img" width="35" height="35">
</script>
{/block}
{block name="script"}
<script src="__STATIC__/libs/jquery-plugins/jquery.previewImage.js"></script>
<script>
    var options = {
        id: 'dataTable',
        formId: 'searchForm',
        toolbar: '#toolbarDemo',
        url: '{:url("manage")}',
        page: true,
        sortOrder: '', //排序方式  asc: 升序、desc: 降序、null: 默认排序
        cols: [
            [
                { type: 'checkbox', fixed: 'left' },
                { field: 'id', width: 100, title: '用户ID', sort: true },
                { field: 'username', width: 100, title: '用户名',templet: '<div>{{#  if(d.vip==1){ }} <span class="text-danger">[VIP]</span> {{#  } }}{{ d.username }}</div>'},
                { field: 'avatar', width: 60, title: '头像', templet: '#avatarTpl'},
                { field: 'nickname', width: 120, title: '昵称' },
                { field: 'email', minWidth: 180,  title: '邮箱' },
                { field: 'mobile', width: 120,  title: '手机号' },
                { field: 'reg_ip', width: 140, title: '注册IP' },
                { field: 'last_login_time', width: 160, title: '最后登录' },
                { field: 'amount', width: 100, title: '金钱总数' },
                { field: 'point', width: 100, title: '积分总数' },
                { field: 'login', width: 100, title: '登录次数' },
                { field: 'status', width: 120, align: "center", title: '状态', templet: '#statusTpl', unresize: true },
                { fixed: 'right', width: 120, title: '操作', templet: '#barTool' }
            ]
        ],
        done: function(res, curr, count){
            $('.preview-img').previewImage();
        }, //表格数据渲染完的回调
    };
    // 搜索
    options.searchParams = function(){
        var formData = $.table._searchFormData();
        var data = {
            search_field: 'username,nickname,email,mobile',
            keyword: $('input[name="keyword"]').val(),
        };
        data = $.extend(formData, data);
        return data;
    };
    // 加载layui表格
    $.table.init(options);
</script>
{/block}